<template>
  <div id="mdEditor">
    <Editor
      :value="content"
      :plugins="plugins"
      :locale="zhHans"
      @change="handleChange"
    />
  </div>
</template>

<script setup lang="ts">
import gfm from "@bytemd/plugin-gfm";
import highlight from "@bytemd/plugin-highlight";
import { Editor, Viewer } from "@bytemd/vue-next";
import { ref } from "vue";
import "bytemd/dist/index.css";
import "highlight.js/styles/vs.css";
import "github-markdown-css";
import zhHans from "bytemd/lib/locales/zh_Hans.json";

const plugins = ref([
  gfm(),
  highlight(),
  // Add more plugins here
]);
const locale = ref("ko");
const content = ref("");
defineExpose({ content, handleChange });

function handleChange(v: any) {
  content.value = v;
}
</script>

<style scoped>
#mdEditor {
  width: 1000px;
}
:deep(.bytemd-fullscreen) {
  z-index: 9999;
}
</style>
